<template>
  <div id="skillLift">
    <div class="skillLiftContent">
      <div class="skillLiftPublicBook" v-for="(item, index) in skillLiftData" :key="index">
        <div class="skillLiftPublicBookTitleKind">
          <h2>{{item.title}}</h2>
          <span v-for="(items, indexs) in item.titleList" :key="indexs" @click="fetchSkillLiterByType(item.id, items.classifyId, index)">{{items.classifyName}}</span>
          <b @click="jumpTo(`/classifyList?id=${item.titleList[0].classifyId}&index=${item.id}`)">更多</b>
        </div>
        <div class="skillLiftPublicBookFlex">
          <div class="skillLiftPublicBookFlexLeft">
            <div class="publicBookSign">
              <i></i>
              <b class="ellipse">{{item.title}}</b>
              <h3 class="ellipse-two">{{item.publicityText}}</h3>
              <p>
                [设计思路]
                <br/>
                &nbsp;&nbsp;&nbsp;&nbsp;{{item.publicityTextCon}}
              </p>
            </div>
            <div class="publicBookWorks">
              <h1>{{item.worksNum}}</h1>
              <p>作品数量</p>
            </div>
          </div>
          <div class="skillLiftPublicBookFlexRight">
            <ul>
              <li v-for="(items, index) in item.worksList" :key="index" @click="jumpTo('/worksDetail?worksId=' + items.id)">
                <img class="publicBookFruitImg" :src="$globalImageUrl + items.imageUrl" alt="">
                <p class="ellipse">{{items.worksTitle}}</p>
                <div class="publicBookRemark">
                  <img src="../../assets/img/common/browse.png" alt="">
                  <span>{{items.browseNum}}</span>
                  <img src="../../assets/img/common/comment.png" alt="">
                  <span>{{items.commentNum}}</span>
                  <img src="../../assets/img/common/praise.png" alt="">
                  <span>{{items.praiseNum}}</span>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import skillLiftData from './index.json'
import pageNumber from '../../components/pageNumber/index'

export default {
  name: 'skillLift',
  data () {
    return {
      skillLiftData: skillLiftData,
      childId: 0
    }
  },
  created () {
    this.fetchSkillSelectLiterature()
  },
  methods: {
    // 跳转到所有作品
    handleClassifyList () {
      this.$router.push('/classifyList')
    },
    // 获取实战案例列表
    fetchSkillSelectLiterature () {
      this.$api.getSkillSelectLiterature({
      }).then(res => {
        console.log(res)
        if (res.code === 0) {
          this.skillLiftData = []
          for (let i = 0; i < res.data.length; i++) {
            this.skillLiftData.push({
              id: res.data[i].classifyId,
              title: res.data[i].classifyName,
              titleList: res.data[i].classifyList,
              publicityText: res.data[i].classifyLabel,
              publicityTextCon: res.data[i].classifyDescribe,
              worksNum: res.data[i].worksNum,
              worksList: []
            })
            for (let j = 0; j < res.data[i].literatureList.length; j++) {
              this.skillLiftData[i].worksList.push({
                imageUrl: res.data[i].literatureList[j].literatureImg,
                worksTitle: res.data[i].literatureList[j].literatureName,
                browseNum: res.data[i].literatureList[j].watchNum,
                commentNum: res.data[i].literatureList[j].commentNum,
                praiseNum: res.data[i].literatureList[j].likeNum,
                id: res.data[i].literatureList[j].id
              })
            }
          }
          console.log(this.skillLiftData)
        }
      })
    },
    // 获取实战案例每项列表
    fetchSkillLiterByType (id, childId, index) {
      if (this.childId === childId) {
        return
      }
      this.childId = childId
      this.$api.getSkillLiterByType({
        categoryId: id,
        reclassifyId: childId
      }).then(res => {
        console.log(res)
        if (res.code === 0) {
          this.skillLiftData[index].worksList = []
          for (let i = 0; i < res.data.length; i++) {
            this.skillLiftData[index].worksList.push({
              imageUrl: res.data[i].literatureImg,
              worksTitle: res.data[i].literatureName,
              browseNum: res.data[i].watchNum,
              commentNum: res.data[i].commentNum,
              praiseNum: res.data[i].likeNum,
              id: res.data[i].id
            })
          }
        }
      })
    }
    // 获取大类详情
    // fetchSkillSelectLiterByType () {
    //   this.$api.getSkillSelectLiterByType({
    //   }).then(res => {
    //     console.log(res)
    //   })
    // }
  }
}
</script>

<style lang="less" scoped>
#skillLift{
  // text-align: center;
  .skillLiftContent{
    width: 1200px;
    margin: 0 auto;
    padding-top: .5rem;
    .skillLiftPublicBook{
      padding-bottom: .5rem;
      .skillLiftPublicBookTitleKind{
        margin-bottom: .2rem;
        position: relative;
        h2{
          font-size: 0.28rem;
          line-height: 0.4rem;
          font-weight: 400;
          color: #333;
          display: inline-block;
        }
        span{
          font-size: 0.16rem;
          line-height: 0.26rem;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          padding-left: .1rem;
          cursor: pointer;
        }
        b {
          position: absolute;
          right: 0;
          bottom: 0;
          font-size: .16rem;
          font-weight: 500;
          color: #999;
        }
      }
      .skillLiftPublicBookFlex{
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;
        .skillLiftPublicBookFlexLeft{
          width: 2.3rem;
          .publicBookSign{
            height: 3rem;
            background-color: #facc51;
            padding: .1rem;
            i{
              width: .5rem;
              height: .02rem;
              background-color: #fff;
              margin-top: .2rem;
              display: block;
            }
            b{
              color: #fff;
              font-size: 0.14rem;
              font-weight: 400;
              font-size: 14px;
              display: block;
              margin-top: .2rem;
            }
            h3{
              color: #fff;
              font-size: 0.24rem;
              font-weight: 400;
              line-height: 0.34rem;
              margin-top: .1rem;
            }
            p{
              color: #fff;
              font-size: 0.14rem;
              line-height: 0.22rem;
              font-weight: 400;
              display: block;
              margin-top: .1rem;
              overflow: hidden;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 6;
            }
          }
          .publicBookWorks{
            height: 1rem;
            background-color: #fff;
            text-align: center;
            h1{
              font-size: 0.26rem;
              font-weight: bold;
              color: #15a29c;
              line-height: 0.3rem;
              padding-top: .2rem;
            }
            p{
              font-size: 0.14rem;
              font-weight: bold;
              color: #999999;
              line-height: 0.22rem;
              padding-top: .05rem;
            }
          }
        }
        .skillLiftPublicBookFlexRight{
          width: calc(100% - 2.3rem);
          height: 4rem;
          padding-left: .2rem;
          ul{
            display: flex;
            justify-content: left;
            flex-wrap: wrap;
            li:nth-child(4n) {
              margin-right: 0;
            }
            li{
              display: inline-block;
              margin-bottom: .1rem;
              background-color: #fff;
              width: 2.3rem;
              margin-right: .1rem;
              img.publicBookFruitImg{
                width: 100%;
                height: 1.5rem;
                display: inline-block;
              }
              p{
                font-size: 0.14rem;
                font-weight: 500;
                color: #333;
                line-height: .26rem;
                height: .2rem;
                padding: 0 .05rem;
              }
              div.publicBookRemark{
                padding: 0 .05rem;
                img{
                  width: .12rem;
                  height: .12rem;
                  display: inline-block;
                }
                span{
                  font-size: 0.13rem;
                  font-weight: 500;
                  color: #aaa;
                  line-height: 0.16rem;
                }
              }
            }
            li:nth-child(n + 5) {
              margin-bottom: 0;
            }
          }
        }
      }
    }
  }
}
</style>
